<template>
  <section class="todoapp">
  {{get}}
   <todo-header @Tohead="addtext"></todo-header>
   <todo-main  :list="gett"  @Hdsk="deleted" @Hchange="show" @Todoval="THval"></todo-main>
   <todo-footer :list="gett" @Clearlist="Toclear" @THclick="tdclick"></todo-footer>

   
  </section>
</template>

<script>
// 需求1: 去教学资料中复制静态页面到 src
// 需求2: 拆分组件
// 2.1 将静态代码拆分到三个组件中
// 2.2 在 App.vue 中引入并注册
// 2.3 按照顺序摆放组件

// 需求3: 渲染数据
// 3.1 在 App.vue 中定义数据
// 3.2 通过父传子把数据传递给 TodoMain.vue
// 3.3 TodoMain.vue 中使用 props 来接收
// 3.4 使用 v-for 循环渲染列表
// 3.5 使用动态 class 控制 completed 类名

// 需求4: 删除功能
// 4.1 找到 x 标签, 绑定点击事件, 传入 id
// 4.2 使用 this.$emit 将 id 传递给父组件 App.vue
// 4.3 父组件接收到 id 后, 根据 id 找到索引
// 4.4 根据索引删除数据

// 需求5: 修改状态
// 5.1 找到 TodoMain 的 input 标签, 不要使用 v-model 绑定状态, 而是用 :checked 来单向绑定, 因为单向数据流的原因
// 5.2 给 input 绑定 change 事件, 传入 id
// 5.3 将 id 传给父组件
// 5.4 父组件根据 id 去修改 isDone 状态

// 需求6: 添加功能
// 6.1 使用 v-model 在 TodoHeader 中进行双向绑定, 获取用户输入的任务名
// 6.2 给 input 绑定键盘按下事件, 使用 .enter 修饰符捕获用户按下回车操作
// 6.3 当用户按下回车后, 子传父将任务名传递给父组件
// 6.4 父组件收到任务名后, 添加对象到任务列表中
// 6.5 添加成功后清空输入框 / 非空判断

// 需求7: 统计剩余数量
// 7.1 在 App.vue 中将 list 传递给 TodoFooter.vue
// 7.2 TodoFooter 接收后直接渲染 list.length 即可 (也可以定义计算属性)

// 需求8: 清除已完成
// 8.1 在 TodoFooter 定义计算属性
// 8.2 使用 some 来获取所有数据的勾选状态, 只要有一个勾选了就返回 true
// 8.3 使用 v-show 来控制显示已完成按钮的显示隐藏
// 8.4 给清除已完成绑定点击事件
// 8.5 点击后子传父, 触发父组件的事件处理函数
// 8.6 父组件筛选出所有未完成的数据, 覆盖回去即可实现功能

// 需求9: 点击筛选高亮
// 9.1 在 TodoFooter 中定义 type, 默认值为 all
// 9.2 给三个 a 标签绑定点击事件, 点击后修改 type 为对应的值
// 9.3 给三个 a 标签设置动态 class, 如果 type 为当前的值就高亮

// 需求10: 筛选功能实现
// 10.1 子传父, 将 type 从 TodoFooter 传递到 App (事件委托)
// 10.2 在父组件中保存 type 在 data 中
// 10.3 定义计算属性 showList, 根据 type 来返回对应的数据
// 10.4 将传入给子组件的 list 改为 showList

// 需求11: 数据持久化
// 11.1 使用 watch 来侦听 list 的变化
// 11.2 当数据变化时, 将 list 存入到本地
// 11.3 页面加载时, 去本地取出 list

// 需求12: 全选功能
// 12.1 在 TodoMain 中定义计算属性 isAll
// 12.2 使用 v-model 双向绑定 isAll 和全选框
// 12.3 isAll 是一个完整写法的计算属性
// 12.4 当 isAll 被修改时, 子传父, 由父组件 App 收到后修改所有小选框状态
// 12.5 get 方法返回 list 中所有小选框的状态统计的结果, 全部勾选才返回 true 否则返回 false

import TodoHeader from './component/TodoHeader'
import TodoMain from './component/TodoMain'
import TodoFooter from './component/TodoFooter'

export default {
  
components:{
  TodoHeader,
  TodoMain,
  TodoFooter 

},
data(){
  return{
   /*  list: [
        { id: 1, name: '吃饭', isDone: true },
        { id: 2, name: '睡觉', isDone: false },
        { id: 3, name: '打豆豆', isDone: true }
      ], */
      list:JSON.parse(localStorage.getItem('list')||'[]'),
      type:'all'
  }
},
methods:{
  deleted(id){
    const Indexx=this.list.findIndex(item=>item.id===id)
    this.list.splice(Indexx,1)
  },
  show(id){
    const item=  this.list.find(item=>item.id===id)
    item.isDone=!item.isDone
  },
  addtext(Totex){
    this.list.push({
      id:Date.now(),
      name:Totex,
      isDone:false

    })
  },
  Toclear(){
    //清除已完成
    //Vue开发研究一个数据驱动视图
    //我们更多的就是操作数据
    //所谓的清除已完成,就是筛选出所有未完成的数据,覆盖会list
    this.list=this.list.filter(item=>!item.isDone)
  },
  tdclick(type){
    this.type=type
  },
  THval(val){
this.list.forEach(item =>item.isDone=val);
  }

},
computed:{
  gett(){
    //console.log(this.type);
    if(this.type==='yes'){
     return this.list.filter(item=>item.isDone)
    }else if(this.type==='no'){
      return  this.list.filter(item=>!item.isDone)
    }else{
      return this.list
    }
   
  }
},
watch:{
   list:{
    handler(){
     localStorage.setItem('list',JSON.stringify(this.list))
    },
    deep:true
   }
},


}
</script>

<style>

</style>
